<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physics_canvas" width="550" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physics_canvas');
    const ctx = canvas.getContext('2d');

    // Fill background
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // General styling
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 24px "Times New Roman"';

    // Coordinates and dimensions
    const x_s = 100;
    const x_b = 450;
    const y_main = 150;
    const L_label_y = 230;
    const cross_size = 6;
    const v_vector_length = 80;

    // Helper function to draw a cross 'x'
    function drawCross(x, y, size) {
        ctx.beginPath();
        ctx.moveTo(x - size, y - size);
        ctx.lineTo(x + size, y + size);
        ctx.moveTo(x + size, y - size);
        ctx.lineTo(x - size, y + size);
        ctx.stroke();
    }
    
    // Helper function to draw a filled arrowhead.
    // The default shape points along the negative x-axis (left).
    // It is drawn with its tip at the specified (x, y) coordinates.
    function drawFilledArrowhead(x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0); // Tip of the arrow
        ctx.lineTo(-size, -size / 2.2);
        ctx.lineTo(-size, size / 2.2);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- Start Drawing ---

    // 1. Draw point S
    drawCross(x_s, y_main, cross_size);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('S', x_s, y_main - 10);

    // 2. Draw point B
    drawCross(x_b, y_main, cross_size);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('B', x_b + 5, y_main + 10);

    // 3. Draw dashed line between S and B
    ctx.save();
    ctx.setLineDash([7, 7]);
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(x_s, y_main);
    ctx.lineTo(x_b, y_main);
    ctx.stroke();
    ctx.restore();

    // 4. Draw distance L measurement
    const tick_height = 20;
    ctx.lineWidth = 1.5;

    // Vertical ticks
    ctx.beginPath();
    ctx.moveTo(x_s, L_label_y - tick_height / 2);
    ctx.lineTo(x_s, L_label_y + tick_height / 2);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_b, L_label_y - tick_height / 2);
    ctx.lineTo(x_b, L_label_y + tick_height / 2);
    ctx.stroke();

    // Horizontal line for L
    ctx.beginPath();
    ctx.moveTo(x_s, L_label_y);
    ctx.lineTo(x_b, L_label_y);
    ctx.stroke();

    // Stroked arrowheads for L, matching the image style
    const L_arrow_len = 10;
    const L_arrow_h = 5;
    // Left arrowhead (pointing left)
    ctx.beginPath();
    ctx.moveTo(x_s + L_arrow_len, L_label_y - L_arrow_h);
    ctx.lineTo(x_s, L_label_y);
    ctx.lineTo(x_s + L_arrow_len, L_label_y + L_arrow_h);
    ctx.stroke();
    // Right arrowhead (pointing right)
    ctx.beginPath();
    ctx.moveTo(x_b - L_arrow_len, L_label_y - L_arrow_h);
    ctx.lineTo(x_b, L_label_y);
    ctx.lineTo(x_b - L_arrow_len, L_label_y + L_arrow_h);
    ctx.stroke();
    
    // Label L
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('L', (x_s + x_b) / 2, L_label_y - 5);

    // 5. Draw velocity vector v
    const v_end_y = y_main - v_vector_length;
    
    // Vector line
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(x_b, y_main);
    ctx.lineTo(x_b, v_end_y);
    ctx.stroke();

    // Vector arrowhead (filled)
    // To point up, we need to rotate the default left-pointing shape by -90 deg.
    const angle_up = -Math.PI / 2;
    ctx.fillStyle = "black";
    drawFilledArrowhead(x_b, v_end_y, angle_up, 12);

    // Vector label v
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('v', x_b + 15, y_main - v_vector_length / 2);
    
</script>
</body>
</html>